<template>
  <view class="weather-page">
    <view v-if="tomorrowWeather" class="weather-card">
      <view>日期：{{ tomorrowWeather.date }}</view>
      <view>星期：{{ tomorrowWeather.week }}</view>
      <view>最高温：{{ tomorrowWeather.maxTemp }}°C</view>
      <view>最低温：{{ tomorrowWeather.minTemp }}°C</view>
    </view>
    <view v-else>
      天气信息加载中...
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 存储明天的天气信息
      tomorrowWeather: null
    }
  },
  onLoad() {
    // 页面加载时发起请求
    this.fetchWeatherData();
  },
  methods: {
    fetchWeatherData() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        // 允许跨域请求携带cookie（部分接口需要）
        withCredentials: false,
        success: (res) => {
          // 打印数据方便调试
          console.log('接口返回数据：', res.data);
          // 适配原接口返回格式（需根据实际返回调整）
          if (res.statusCode === 200) {
            // 原接口可能返回的状态码字段是"status"（如200为成功）
            if (res.data.status === 200 && res.data.data?.forecast) {
              const forecastList = res.data.data.forecast;
              // 原接口forecast数组第1项为明天的天气
              const tomorrowForecast = forecastList[1];
              this.tomorrowWeather = {
                date: tomorrowForecast.date,
                week: tomorrowForecast.week,
                maxTemp: tomorrowForecast.high.replace('最高温 ', ''),
                minTemp: tomorrowForecast.low.replace('最低温 ', '')
              };
            } else {
              uni.showToast({
                title: `接口错误：${res.data.message || '数据格式异常'}`,
                icon: 'none'
              });
            }
          } else {
            uni.showToast({
              title: `请求失败：状态码${res.statusCode}`,
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('网络错误详情：', err);
          uni.showToast({
            title: '网络请求失败（可能接口已失效）',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.weather-page {
  padding: 30rpx;
}

.weather-card {
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
}

.weather-card view {
  margin-bottom: 15rpx;
}
</style>